<template>
  <view class="bjys">
    <view @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <view class="title">
      糖蜜福利
    </view>
    <view class="content" v-if="hd">
      <view class="swiperItem">
        <swiper class="swiper3" :duration="1000" autoplay :interval="2000" circular :current="current" @change="change">
          <swiper-item v-for="(item,index) in hd" :key="index" @click="webBtn(item.hd_url)">
            <view class="swiper3_item" :class="current==index?'swiper2_active':''">
              <image class="" :src="item.hd_pic" mode="widthFix"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="detail_cont1" v-for="(item,index) in txtList1" :key="index">
      <view class="a-center" v-if="item.t_name">《{{item.t_name}}》</view>
      <view class="VIP_img" v-if="item.t_vip == 2">
        VIP
      </view>
      <view class="" v-if="item.t_addtime">
        发布时间:{{item.t_addtime}}
      </view>
      <view class="" v-if="item.t_contents">
        <!-- <span v-html=""></span> -->
        <rich-text :nodes="item.t_contents"></rich-text>
      </view>
      <!-- <view class="" v-if="(item1,index1) in item" :key="index1">
        {{item1}}
      </view> -->
    </view>
    <!-- <wxy-audio :src="mp3List[num].t_yp" v-if="num == index && mp3List[num].t_yp" :play.sync="audioPlay" msshow name="音频播放"></wxy-audio> -->
    <!-- <audio style="text-align: center" v-if="mp3List && mp3List[num].t_yp" :src="mp3List[num].t_yp" controls></audio> -->
    <view class="auto_list" v-for="(item,index) in mp3List" :key="index">
      <wxy-audio :src="src" v-if="num == index && mp3List[num].t_yp" :play.sync="audioPlay" msshow name="音频播放">
      </wxy-audio>
    </view>
    <view class="auidoFles">
      <view v-for="(item,index) in mp3List" :key="index" :class="num == index ? 'buttng':'buttng2'"
        @click="changeBtn(index)">{{index}}</view>
    </view>

    <!-- <view class="a-center" v-if="txtList1[0].t_yp">《{{txtList1[0].t_name}}》</view> -->

  </view>
</template>

<script>
  export default {
    data() {
      return {
        hd: [],
        src: '',
        current: 0,
        txttype: [],
        stamp: false,
        audioPlay: true,
        num: 0,
        tab1list: [],
        txtList1: [],
        mp3List: []
      }
    },
    onLoad(opt) {
      this.$http.txt({
        id: opt.id,
        t: uni.getStorageSync('token')
      }).then(res => {
        if (res.code == 200) {
          this.txtList1 = res.data.txt;
          this.mp3List = res.data.txt.mp3;
          this.src = res.data.txt.mp3[0].t_yp;
        }
      })
      this.$http.indexIn().then(res => {
        if (res.code == 200) {
          this.hd = res.data.hd;
        }
      })
    },
    methods: {
      changeBtn(index) {
        if (this.src != this.mp3List[index].t_yp) {
          this.num = index;
          this.src = this.mp3List[index].t_yp;
          console.log(this.src, 123)
          this.audioPlay = true;
          // setTimeout(() => {
          //   this.audioPlay = true;
          // }, 200)
          return;
        } else {
          this.audioPlay = !this.audioPlay;
        }

      },
      webBtn(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      /**
       * 音频
       */

      navigateBtn() {
        uni.navigateBack();
      },
      change(e) {
        let num = e.detail.current;
        this.current = num;
      },
    }
  }
</script>

<style lang="less">
  .bjys {
    .title {
      margin-top: 20rpx;
      font-size: 32rpx;
      text-align: center;
      color: #FFFFFF;
    }
  }

  .content {
    // background-color: black;
    padding-bottom: 15rpx;
  }

  .swiperItem {
    position: relative;
    width: 100%;
    min-height: 210rpx;
    margin-bottom: 30rpx;
  }

  .swiper3 {
    position: relative;
    width: 100%;
    height: 440rpx;
    display: flex;
    align-items: center;

    swiper-item {
      text-align: center;

      .swiper3_item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        transition: all 0.5s ease;
        overflow: hidden;
        border-radius: 40rpx;

        image {
          width: 100%;
        }
      }
    }
  }

  .list_detai {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 92%;
    margin: 0 auto;

    .detail2 {
      width: 100%;
      border-radius: 25rpx;

      image {
        width: 100%;
        border-radius: 25rpx;
      }
    }

    .detail {
      border-radius: 25rpx;
      margin-right: 30rpx;
      width: 45%;

      image {
        width: 100%;
        border-radius: 25rpx;
      }

      p {
        width: 100%;
        text-align: center;
      }
    }
  }

  .detail_cont {
    position: relative;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      right: 20rpx;
      z-index: 9;
      border-radius: 0rpx 0 0 20rpx;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }

  .detail_cont1 {
    position: relative;
    text-align: center;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      right: 20rpx;
      z-index: 9;
      border-radius: 0rpx 0 0 20rpx;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }

  .play_back {
    width: 60rpx !important;
    height: 60rpx !important;
  }

  // .swiper2_active {
  //   transform: scale(1.4);
  // }
  .a-center {
    color: #384959;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    float: left;
  }

  .auto_list {
    width: 750rpx;
    display: flex;
    flex-wrap: wrap;



  }

  .auidoFles {
    margin-top: 50rpx;
    width: 100%;
    display: flex;
    justify-content: flex-start;

    .buttng {
      background-color: #334456;
      margin-right: 20rpx;
      width: 80rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      border-radius: 18rpx;
      color: white;
    }

    .buttng2 {
      background-color: #bcc2c6;
      width: 80rpx;
      margin-right: 20rpx;
      color: white;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      border-radius: 18rpx;
    }
  }
</style>
